<template lang="html">

    <div class="g-tags" @click="focusInput">
        <span v-if="!focusOrNot && tags.length <= 0 && !readOnly" class="tips">逗号分隔标签</span>
        <span class="tag" v-for="(tag, idx) in tagArr">
            {{tag}}
            <i class="iconfont icon-close" @click="deleteTag(idx)"></i>
        </span>
        <input type="text" v-model="newTagText" @keyup="addTag"
            :readonly="tagArr.length >= 5" v-focus="focusOrNot"
            @blur="blurInput" v-if="!readOnly">
    </div>

</template>

<script>

import Bus from '@/utils/event_bus'

export default {

    props: {
        tags: Array,
        isReadonly: Boolean
    },

    data: function() {
        return {
            tagArr: this.tags ? this.tags : [],
            newTagText: '',
            focusOrNot: false,
            readOnly: this.isReadonly ? this.isReadonly : false,
        };
    },

    methods: {

        addTag: function(evt) {

            if (this.newTagText.length >= 6) {
                this.newTagText = this.newTagText.substring(0, 5);
                this.$message('单个标签不能超过5个字符');
                return;
            }

            if (evt.keyCode === 13 || evt.code === "Comma") {
                let userInput =  this.newTagText.replace(/[,，]/, '').trim();
                if (userInput !== '') {
                    if (this.tagArr.indexOf(userInput) !== -1) {
                        return this.$message('不可使用重复的标签');
                    }
                    this.tagArr.push(userInput);
                }
                this.newTagText = '';
            }
        },

        deleteTag: function(idx) {
            this.tagArr.splice(idx, 1);
        },

        focusInput: function() {
            this.focusOrNot = true;
        },

        blurInput: function() {
            this.focusOrNot = false;
        }

    },

    watch: {

        tagArr: function(newValue) {
            Bus.$emit('tags-change', this.tagArr);
            if (this.tagArr.length >= 5) {
                this.$message('最多添加5个标签');
            }
        }

    },

    directives: {
        focus: {
            inserted: function (el, bindings) {
                if (bindings.value) {
                    el.focus();
                } else {
                    el.blur();
                }
            },
            update: function(el, bindings) {
                if (bindings.value) {
                    el.focus();
                } else {
                    el.blur();
                }
            },
            componentUpdated: function(el, bindings) {
                if (bindings.value) {
                    el.focus();
                } else {
                    el.blur();
                }
            }
        }
    }

}
</script>

<style lang="scss" scoped>

.g-tags {

    overflow-x: auto;

    span.tips {
        display: inline-block;
        padding: 0 8px;
        color: #889;
    }

    .tag {
        font-size: 12px;
        display: inline-block;
        padding: 1px 4px 1px 9px;
        line-height: 20px;
        margin: 2px 4px;
        background-color: #ddd;
        border-radius: 4px;
        position: relative;

        i {
            font-size: 12px;

            &:hover {
                cursor: pointer;
            }
        }
    }

    input {
        margin-left: 8px;
        width: 100px;
        color: rgba(0, 0, 0, .65);
    }

}

</style>
